/*
	smallImg:bigImg = floatBox:bigBox

*/
;(function(window,document){
	function Zoom(id){
		this.zoom = document.getElementById(id);
		this.smallBox = this.zoom.children[0];
		this.floatBox = this.smallBox.children[0];
		this.bigBox = this.zoom.children[1];
		this.bigImg = this.bigBox.children[0];
		this.left = 0;
		this.top = 0;
		this.init();
	}
	Zoom.prototype.toggle = function(type){//切换状态的函数
		this.floatBox.style.display = type;
		this.bigBox.style.display = type;
	};
	Zoom.prototype.border = function(){//判断是否到边框
		if(this.left<0){
			this.left = 0;
		}else if(this.left>this.smallBox.offsetWidth-this.floatBox.offsetWidth){
			this.left = this.smallBox.offsetWidth-this.floatBox.offsetWidth;
		}
		if(this.top<0){
			this.top = 0;
		}else if(this.top>this.smallBox.offsetHeight - this.floatBox.offsetHeight){
			this.top = this.smallBox.offsetHeight - this.floatBox.offsetHeight;
		}
	};
	Zoom.prototype.setPosition = function(e){//设置浮动框的位置
		this.left = e.clientX - this.smallBox.offsetLeft - this.floatBox.offsetWidth/2; 
		this.top = e.clientY - this.smallBox.offsetTop - this.floatBox.offsetHeight/2;
		this.border();
		this.floatBox.style.left = this.left+"px";
		this.floatBox.style.top = this.top+"px";
		console.log(this.top)
	};
	Zoom.prototype.setImgPosition = function(){//设置大图的位置

		this.bigImg.style.left = -this.left/this.smallBox.offsetWidth*this.bigImg.offsetWidth + "px";
		this.bigImg.style.top = -this.top/this.smallBox.offsetHeight*this.bigImg.offsetHeight + "px";
	}

	Zoom.prototype.init = function(){//初始化
		var _this = this;
		this.smallBox.onmouseenter = function(){
			_this.toggle('block');
		}
		this.smallBox.onmouseleave = function(){
			_this.toggle('none');
		}
		this.smallBox.onmousemove = function(event){
			var e = event || window.event;
			_this.border();
			_this.setPosition(e);
			_this.setImgPosition();
		}
	}

	window.Zoom = Zoom;
}(window,document))

